<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信号新闻客户端</title>
    <style>
        *{padding: 0;margin: 0;}
        html{
            background-color: #f4f5f5;
            height: 100%;
        }
        body{max-width: 640px;
            margin: 0 auto;
            height: 100%;
            background-color: #fff;
            display: flex;
            align-items: center;
        }
        img{
            display: block;
            width: 100%;
        }
        .imgbox{
            width: 100px;
            height: auto;
            margin: 0 auto;
            border-radius: 10px;
            overflow: hidden;
        }
        .top{
            padding-bottom: 20px;
            background-image: url();
            background-position: center bottom;
            background-size: 100%;
            background-repeat: no-repeat;
        }
        a{
            text-decoration: none;
        }
        .btn{
            background-color: #fff;
            color: #e35645;
            display: block;
            width: 100%;
            margin: 0 auto;
            line-height: 46px;
            border: 1px solid;
            text-align: center;
            border-radius: 50px;
            margin: 15px 0;
        }
        .btn.primary{
            background-color: #e35645;
            color: #fff;
        }
        .btn.blue-primary{
            background-color: #4597e3;
            color: #fff;
        }
        .btn.blue{
            color: #4597e3;
        }
        .btn.disable{
            color: #ccc;
        }
        .btns{
            width: 80%;
            margin: 10px auto 0;
        }
        .tips{
            text-align: center;
            font-size: 16px;
            color: #000;
            font-weight: 700;
        }
        .tips-gray{
            color: #666;
            display: block;
            text-align: center;
            margin-bottom: 15px;
        }
        .wrapper{
            margin: auto;
            width: 100%;
        }
        .guide-cover{
            background-color: #000;
            background-color: rgba(0, 0, 0, 0.8);
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 10;
            display: none;
        }
        .guide-cover:before{
            content: "×";
            position: absolute;
            bottom: 40px;
            width: 50px;
            height: 50px;
            color: #fff;
            border: 1px solid;
            line-height: 46px;
            text-align: center;
            font-size: 3em;
            border-radius: 50%;
            left: 50%;
            margin-left: -25px;
        }
        .bendi{
            display: none;
        }
        .bendi.show{
            display: block;
        }
    </style>
</head>
<body>
    <!-- https://634174214.gitee.io/myself-jianli/download/xinhao-app.html -->
    <div class="wrapper">
        <div class="top">
            <div class="imgbox">
                <img src="">
            </div>
        </div>
        <div class="btns">
            <small class="tips-gray">请选择您合适的下载方式</small>
            <p class="tips">IOS</p>
            <a href="https://apps.apple.com/cn/app/id6444197756?ls=1" class="btn primary" target="_blank">AppStore 下载</a>

            <p class="tips">安卓</p>
            <a href="__UNI__A31D7CD_2.1.5.apk" class="btn blue-primary bendi" target="_blank" id="download-bendi-real">本地下载</a>
            <button class="btn primary bendi" id="download-bendi">本地下载</button>
            <a class="btn blue" target="_blank">应用宝中下载</a>
            
            <!-- <a class="btn disable" target="_blank">华为应用商店中下载</a>
            <a class="btn disable" target="_blank">小米应用商店中下载</a> -->
        </div>
    </div>

    <div class="guide-cover" id="guide-cover">
        <img src="">
    </div>
    
    <script src="https://www.qdxin.cn/js/xinquery.js"></script>
    <script>
        function isWeiXin(){
            var ua = window.navigator.userAgent.toLowerCase();
            if(ua.match(/MicroMessenger/i) == 'micromessenger'){
                return true;
            }else{
                return false;
            }
        }
        </script>
    <script>
        var isWX = (function() {
            var ua = window.navigator.userAgent.toLowerCase();
            if(ua.match(/MicroMessenger/i) == 'micromessenger'){
                return true;
            }else{
                return false;
            }
        })();

        var $bendi = $('#download-bendi');
        var $bendiReal = $('#download-bendi-real');
        var $guide = $('#guide-cover');

        if(isWX) {
            $bendi.addClass('show');
        } else {
            $bendiReal.addClass('show');
        }

        $bendi.on('click', function() {
            $guide.fadeIn();
        });

        $guide.on('click', function() {
            $guide.fadeOut();
        });

    </script>
</body>
</html>